<template>
  <div class="banner">
    <!-- tab栏盒子 -->
    <div class="header">
      <ul>
        <li
          class="tab-text"
          ref="tabShow"
          v-for="(newCDTag, index) in newCDTagList"
          :key="newCDTag.id"
        >
          <a
            href="#"
            @click="tabShow1(newCDTag.id, index)"
            :class="currentIndex === index ? 'active' : ''"
            >{{ newCDTag.name }}</a
          >
        </li>
      </ul>
    </div>

    <!-- 图片主体部分 -->
    <div class="container">
      <div class="tab-image" v-for="newCD in newCDList" :key="newCD.id">
        <img src="../../../../public/images/03.jpg" alt="" class="image" />
        <div>{{ newCD.name }}</div>
        <div>{{ newCD.singers[0].name }}</div>
        <div>{{ newCD.release_time }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "NewCD",
};
</script>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { getNewCDApi, getNewCDImageApi } from "../../../api/newCD";

const newCDList = ref<any>([]);
const newCDTagList = ref<any>([]);
const picWid = ref([]);
const id = ref(0);

const tab = ref();
onMounted(() => {
  console.log(id);
});

onMounted(async () => {
  const res = await getNewCDApi();
  newCDTagList.value = res.new_album_tag.data.area;
  newCDList.value = res.new_album.data.albums;
  picWid.value = newCDList._rawValue.map((item: any) => {
    return item.photo.pic_mid;
  });
  // console.log( newCDList.value)
});

const isShow = ref(false);

const currentIndex = ref(0);
const active = ref([
  { name: "内地" },
  { name: "港台" },
  { name: "欧美" },
  { name: "韩国" },
  { name: "日本" },
  { name: "其他" },
]);

const tabShow1 = async (id: any, index: any) => {
  isShow.value = true;
  currentIndex.value = index;
  const res = await getNewCDImageApi(id);
  console.log(res);
  console.log(123);
};

const activeName = ref("first");

const handleClick = () => {
  // console.log(tab, e);
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  text-decoration: none;
  /* color: #000; */
}
.active {
  background-color: #31c27c;
  color: #fff !important ;
}
.banner {
  width: 1200px;
  height: 1500px;
  margin: 0 auto;
  /* background-color: red; */
}
.banner .header {
  position: relative;
  width: 800px;
  height: 100px;
  /* background-color: yellow; */
}
.banner .header ul {
  position: absolute;
  top: 60%;
  left: 50%;
  margin-left: -300px;
  display: flex;
  width: 500px;
  height: 50px;
  /* background-color: pink; */
}
.banner .header ul li:nth-child(1) {
  /* background-color: green; */
  color: #fff;
}
.banner .header .tab-text {
  width: 44px;
  height: 26px;
  line-height: 26px;
  /* background-color: green; */
  text-align: center;
  margin: 0 10px;
}
.banner .header .tab-text a {
  width: 44px;
  height: 26px;
  display: inline-block;
  color: #000;
}
.container {
  display: flex;
  flex-wrap: wrap;
}
.container .tab-image {
  display: flex;
  flex-direction: column;
  margin: 0 5px;
}
.container .image {
  width: 228px;
  height: 228px;
  /* border: 1px solid red; */
}
</style>
